/** * @Auther lyh Fun 忘记密码->邮箱找回 * @data 2020/07/07 */
<template>
  <Form
    ref="loginForm"
    :model="form"
    :rules="rules"
    @keydown.enter.native="handleSubmit"
  >
    <FormItem prop="username">
      <Input clearable v-model="form.email" placeholder="请输入邮箱账户" />
    </FormItem>
    <FormItem prop="verification">
      <Input
        clearable
        id="Ipt"
        v-model="form.verification"
        placeholder="请输入验证码"
        style=" width: 50% !important;"
      />
      <span class="yzm"> 4 5 3 8</span>
    </FormItem>
    <FormItem id="fromDiv1">
      <span>
        <router-link :to="{ name: 'findpassword' }"> 去登录></router-link></span
      >
    </FormItem>
    <Button @click="handleSubmit" type="primary" class="queren" long
      >确认</Button
    >
  </Form>
</template>
<script>
export default {
  name: 'PhoneRecovery',
  components: {},
  props: {
    usernameRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '邮箱不能为空', trigger: 'blur' }]
      }
    },
    verificationRules: {
      type: Array,
      default: () => {
        return [{ required: true, message: '验证码不能为空', trigger: 'blur' }]
      }
    }
  },
  data () {
    return {
      form: { email: '', verification: '' }
    }
  },
  computed: {
    rules () {
      return { email: this.emailRules, verification: this.verificationRules }
    }
  },
  methods: {
    handleSubmit () {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$emit('on-success-valid', {
            username: this.form.username,
            password: this.form.password
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
@import '../../style.less'; /*引入公共样式*/
</style>
